<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>春季骑行</title>
	<meta name="viewport" content="width=device-width,user-scalable=no" />
	<style type="text/css">
	* { margin: 0; padding: 0; }
	body, html, ul, li { margin: 0; padding: 0; }
	@font-face { font-family: KMedium; src: url('<?php echo $this->config->item('public_url');?>/winter_act/css/KMedium.ttf'); }
	body { max-width: 640px; margin: 0 auto; font-family: KMedium; font-size: 14px; min-height: 100%; display: block; }
	.body { width: 100%; height: 100%; overflow: hidden; display: block; }
	html { height: 100%; }
	.top_img { width: 100%; height: auto; overflow: hidden;position: relative; }
	.lc_bg{ position: absolute; left: 0; top: -46px; width: 100%;  text-align: center; }
	.lc_bg img{width: 20%;}
	.lc_bg p{ position: absolute; width: 100%; text-align: center;  font-size: 13px;top: 27px; color: #bdcad2; }
	.top_img img { width: 100%; float: left; }
	.km { font-size: 60px; text-align: center; width: 100%; padding: 15px 0 7px 0; color: #333333; position: relative;}
	.km .kmspan { font-size: 30px; font-weight: normal; }
	.update_licheng { color: #333333; width: 72%; height: 32px; line-height: 32px; border-radius: 16px; background-color: #f2f4f6; text-align: center; margin-left: 14%; }
	.no_lingqu{ background-color: #e8f6fe }
	.licheng_li ul { width: 90%; margin-left: 5%; height: auto; overflow: hidden; margin-top: 50px; }
	.licheng_li li { border: 1px solid #eceff1; float: left; list-style: none; height: 160px; width: 31%; border-radius: 8px; }
	.licheng_li li:nth-of-type(2) { margin: 0 2%; }
	.licheng_li .da { border-left: 5px solid #f37748; margin-top: 13px; text-indent: 1em }
	.licheng_li .lingda { border-left: 5px solid #bdcad2; }



	.ling_km { font-size: 30px; text-align: center; margin-top: 15px; margin-bottom: 13px; }
	.ling_km span { font-size: 15px; }
	.licheng_li .ling_btn_big { width: 46px; height: 46px; border-radius: 50%; background-color: #fde4da; padding: 3px; margin: 0 auto; }
	.licheng_li .ling_btn_small { width: 46px; height: 46px; background-color: #f37748; border-radius: 50%; line-height: 48px; text-align: center; color: #fff; font-size: 13px; }
	.num_N { font-size: 18px; }
	.licheng_li .ling_btn_big_l{
		background-color: #f2f4f6
	}
	.licheng_li .ling_btn_small_l{ background-color: #bdcad2 }


	.guize {cursor: pointer; position: absolute; left: 0; bottom: 0; background-color: #f37748; text-align: center; line-height: 30px; color: #fff; width: 100%; }
	/*弹窗*/
	.mask_bg{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 88; background-color: #000; opacity: .8; }

	.mask{ color: #333333; position: fixed; left: 50%; top: 50%;z-index: 99;height: 261px;background-image: url(<?php echo $this->config->item('public_url');?>/winter_act/images/spring_bj.png); background-size: 100% 100%; background-repeat: no-repeat; width: 244px; transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%); }
	.mask .mask_img{ text-align: center;width: 100%;position: relative; top: -53px; height: auto; overflow: hidden;}
    .mask .mask_img img{ width: 100%; }
	.mask .mask_con{ text-align: center;  margin-top: -10px; height: 80px; width: 100%;}
	.mask_con span{  width: 7px; height: 7px; background-color: #71aae9; float: left; position: absolute; display: block; left: -13px; top: 5px;}
	.mask_con p{ position: relative; }
	.mask .close{ position: absolute;  bottom: -70px;  background-image: url(<?php echo $this->config->item('public_url');?>/winter_act/images/spring_close.png); width: 30px; height: 30px; background-size: cover; background-repeat: no-repeat;z-index: 999; cursor: pointer;left: 50%; margin-left: -15px;}
	.mask .mask_btn{ cursor: pointer; background-color: #c9e85b; height: 30px; line-height: 30px; /*padding: 0 38px;*/  text-align: center; border-radius: 15px; margin: 0 auto; width: auto;display: table; width: 110px;}
	.share { background-image: none }
	.share_more{ cursor: pointer; }
	.share .mask_con{     height: 100px;
    color: #fed51c;
    font-size: 22px;
    margin-top: -40px;}
	.share .mask_btn{ margin-top: -52px; cursor: pointer;}
	.share .close{ background-image: url(<?php echo $this->config->item('public_url');?>/winter_act/images/spring_close.png);}

	.mask_alert_bg{ position: fixed; z-index: 555; background-color: #000; opacity: .4; width: 100%; height: 100%; top: 0; left: 0; }
	.mask_alert{ width: 66%;position: fixed; left: 50%; top: 50%; z-index: 666; background-color: #fff; text-align: center; height: auto; overflow: hidden; border-radius: 12px; transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%) }
	.mask_alert_con{padding:20px; border-bottom: 1px solid #e6e5e5}
	.mask_alertclose ,.mask_alertok{ width: 50%; float: left; height: 40px; line-height: 40px; text-align: center; cursor: pointer; color: #4d96db}
	.mask_alertok{ border-left: 1px solid #e6e5e5; margin-left: -1px; }
	
/*	@media screen and (min-width: 380px) {
	    .mask_alert{ font-size: 15px; }
	}*/
	</style>
</head>
<body>
	<div class="body">
		<div class="top_img"><img src="<?php echo $this->config->item('public_url');?>/winter_act/images/spring_qi.png" alt="">

			
		</div>
		<div class="km" data-km="">
			<div class="lc_bg">
				<p>今日里程</p>
				<img src="<?php echo $this->config->item('public_url');?>/winter_act/images/lc.png" >
			</div>


			<span class="km_num">0</span><span class="kmspan">km</span>
		</div>
		<div class="update_licheng no_lingqu"></div>
		<div class="licheng_li ling">
			<ul>
				<li><div class="da lingda">日里程达到</div>
					<div class="ling_km">
						5<span>km</span>
					</div>	
					<div class="ling_btn_big ling_btn_big_l">
						<div  data-type="1" class="ling_btn_small ling_btn_small_l fivekm"></div>
					</div>
				</li>
				<li><div class="da lingda">日里程达到</div>
					<div class="ling_km">
						10<span>km</span>
					</div>	
					<div class="ling_btn_big ling_btn_big_l">
						<div data-type="2" class=" tenkm ling_btn_small ling_btn_small_l num_N"></div>
					</div>
				</li>
				<li><div class="da lingda">日里程达到</div>
					<div class="ling_km">
						20<span>km</span>
					</div>	
					<div class="ling_btn_big ling_btn_big_l">
						<div data-type="3" class="twentykm ling_btn_small ling_btn_small_l num_N"></div>
					</div>
				</li>
			</ul>
		</div>
		<div class="guize">任务规则</div>
	</div>


	<script src="<?php echo $this->config->item('public_url');?>/winter_act/js/jquery-3.2.1.min.js"></script>

	<script type="text/javascript">
		var URL = "<?php echo $this->config->item('public_url');?>/";
		// var information =   decodeURIComponent((new RegExp('[?|&]information=' + '([^&;]+?)(&|#|;|$)', "ig").exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null;
		
		function formatDate(now) { 
		// 年月日
		// var year=now.getYear(); 
		// var month=now.getMonth()+1; 
		// var date=now.getDate(); 
		
		var hour=now.getHours(); 
		var minute=now.getMinutes(); 
		var second=now.getSeconds(); 
			if (parseFloat(hour).toString().length  == 1) {
				hour ="0"+parseFloat(hour).toString()
			}
			if (parseFloat(minute).toString().length  == 1) {
				minute ="0"+parseFloat(minute).toString()
			}
			if (parseFloat(second).toString().length  == 1) {
				second ="0"+parseFloat(second).toString()
			}
			return hour+":"+minute+":"+second; 
		} 
	


		// 模仿confirm弹窗
		// function mask_alert(condata,url){
		// 	var mask_alert_bg = $('<div class="mask_alert_bg"></div>')
		// 	$('body').append(mask_alert_bg)
		// 	var mask_alert = $('<div class="mask_alert"></div>')
		// 	var mask_alertclose = $('<div class="mask_alertclose"></div>')
		// 	var mask_alertok = $('<div class="mask_alertok"></div>')
		// 	var mask_alert_con = $('<div class="mask_alert_con"></div>')
		// 	mask_alert_con.html(condata)
		// 	mask_alertclose.html('取消')
		// 	mask_alertok.html('确定')
		// 	mask_alertok.attr('data-url',url)
		// 	mask_alert.append(mask_alert_con)
		// 	mask_alert.append(mask_alertclose)
		// 	mask_alert.append(mask_alertok)
		// 	$('body').append(mask_alert)
		// }

		// 弹窗
		// 1 9号翻倍
		// 2 当天连接车辆
		// 3 获得奖励
		function mask(condata,img,btndata,num,stype){
			var mask_bg = $('<div class="mask_bg"></div>')
			$('body').append(mask_bg)
			var mask = $('<div class="mask"></div>')
			var close = $('<div class="close"></div>')
			var mask_img = $('<div class="mask_img"></div>')
			var mask_con = $('<div class="mask_con"></div>')
			mask.append(close)
			mask.append(mask_img.html('<img src="'+img+'"/>'))
			mask.append(mask_con.html(condata))
			if (stype == 1) {
				var mask_btn = $('<div class="mask_btn"></div>')
				mask.append(mask_btn.html(btndata))
			}
			$('body').append(mask)
			if (num == 4) {
				$('.mask_con').css({
					"margin-top":"-50px",
					"text-align":"left",
					"width":"88%",
					"margin-left":"8%",
					"height":"auto",
					"position":"relative"
				})
			}
			if (num == 5) {
				$('.mask').addClass('share')
				$('.mask_btn').addClass('share_more')
			}
			if (num == 9) {
				$('.mask').addClass('share')
// 				$('.mask_btn').addClass('share_more')
			}
			if (num == 6) {
				$('.mask_btn').addClass('mask_btn1')
			}
			if (num == 7) {
				$('.mask_btn').addClass('mask_btn2')
			}
		}

		var posturl = "<?= site_url('winter_act/Index/index/')?>";
		$.ajax({
			url: posturl,
			type: 'post',
			data: {
				type:true
			},
		})
		.done(function(data,xhr, textStatus) {
			var data = $.parseJSON(data).data.data;
			console.log(data.last_upload_mileage_date)
			var d=new Date(data.last_upload_mileage_date*1000); 
			var time = formatDate(d)

			if (data.code==1) {
				$('.update_licheng').html(data.desc+time)
			}else  {
				$('.update_licheng').html(data.desc)
			}
			$('.km').attr('data-km',data.day_mileage)
			$('.km_num').html(data.day_mileage)
			// 里程
			// $(function() {
			// 	var j, $nodeval, s;
			// 	j = 0;
			// 	$nodeval = $('.km').attr('data-km');
			// 	s = setInterval(function() {
			// 		j ++;
			// 		j > ($nodeval*100) && clearInterval(s);
			// 		$('.km_num').html((j/100).toFixed(1));
			// 	},1);
			// })

			if (data.get_five_status == 0) {
				$('.fivekm').html(data.fivekm)
			}else{
				$('.fivekm').html('已领取')
				// $('.fivekm').addClass('ling_btn_small_l')
				// $('.fivekm').parents().addClass('ling_btn_big_l')

			}
			if (data.get_ten_status == 0) {
				$('.tenkm').html(data.tenkm)
			}else{
				$('.tenkm').html('已领取')
				// $('.tenkm').addClass('ling_btn_small_l')
				// $('.tenkm').parents().addClass('ling_btn_big_l')
			}
			if (data.get_twenty_status == 0) {
				$('.twentykm').html(data.twentykm)
			}else{
				$('.twentykm').html('已领取')
				// $('.twentykm').addClass('ling_btn_small_l')
				// $('.twentykm').parents().addClass('ling_btn_big_l')

			}


			//  0   灰色     1      点亮
			
			if (data.lighten_five_status == 1) {
				$('.fivekm').removeClass('ling_btn_small_l')
				$('.fivekm').parent().removeClass('ling_btn_big_l')
				$('.fivekm').parent().parent().find('.da').removeClass('lingda')
			}
			if (data.lighten_ten_status == 1) {
				$('.tenkm').removeClass('ling_btn_small_l')
				$('.tenkm').parent().removeClass('ling_btn_big_l')
				$('.tenkm').parent().parent().find('.da').removeClass('lingda')
			}
			if (data.lighten_twenty_status == 1) {
				$('.twentykm').removeClass('ling_btn_small_l')
				$('.twentykm').parent().removeClass('ling_btn_big_l')
				$('.twentykm').parent().parent().find('.da').removeClass('lingda')
			}

			if(data.code == 2){
				// mask_alert('请连接车辆开启今日里程计算','/winter_act/Index/wnumber_status')
				mask("请连接车辆开启今日里程计算",'<?php echo $this->config->item('public_url');?>/winter_act/images/spring_link.png' ,'连接车辆','6','1')
				$('.update_licheng').click(function(event) {
					window.location.href = "/winter_act/Index/wnumber_status";
				});
			}
			if(data.code == 3){
				// mask_alert('请连接车辆开启今日里程计算','/winter_act/Index/wnumber_status')
				mask("该车正在任务进行中<br/>请用其他车辆开启骑行任务",'<?php echo $this->config->item('public_url');?>/winter_act/images/spring_link.png' ,'','6','')
			}
			if(data.code == 4){
				// mask_alert('','/winter_act/Index/wnumber_status')
				mask("请重新上传里程",'<?php echo $this->config->item('public_url');?>/winter_act/images/spring_link.png' ,'上传里程','7','1')
				$('.update_licheng').click(function(event) {
					window.location.href = "/winter_act/Index/wnumber_status";
				});
			}

		})
		.fail(function() {
			console.log("error");
		})
		

	$(document).on('click', '.mask_btn2', function(event) {
		window.location.href = "/winter_act/Index/wnumber_status";

	});

	$(document).on('click', '.mask_btn1', function(event) {
		window.location.href = "/winter_act/Index/wnumber_status";
	});



	$(document).on('click', '.mask_alertok', function(event) {
		var U = $(this).attr('data-url')
		window.location.href = U;
	});
	$(document).on('click', '.mask_alertclose', function(event) {
		$('.mask_alert_bg ,.mask_alert').hide()
		
	});
		
		
		
		// mask('每月9号骑行奖励翻倍','images/img1.png' ,'去看看','1')
		// mask("您已开启今天的骑行任务 <br> 每天骑行5km即可领取10N币",'images/img2.png' ,'去看看','2')
		// mask("您已骑行10km <br> 获得30N币",'images/img3.png' ,'查看奖励','3')
		// mask("规则是什么 <br> 规则是什么<br> 规则是什么<br> 规则是什么",'images/img4.png' ,'查看奖励','4')
		// mask("",'images/share.png' ,'分享','5')


	

		$('.fivekm ,.tenkm ,.twentykm').click(function(event) {
			var that = $(this)
			if (!$(this).hasClass('ling_btn_small_l')) {
				var type = $(this).attr('data-type')
				$.ajax({
					url: '/winter_act/Index/get_award',
					type: 'POST',
					data: {
						type: type
					},
				})
				.done(function(data) {
					var data = $.parseJSON(data)
					console.log(data);
					if (data.code==1) {
						mask(data.data,'<?php echo $this->config->item('public_url');?>/winter_act/images/spring_point.png' ,'分享','9','0')
						//mask(data.data,'<?php echo $this->config->item('public_url');?>/winter_act/images/spring_point.png')
						that.html('已领取')
						that.addClass('ling_btn_small_l')
						that.parent().addClass('ling_btn_big_l')
						that.parent().parent().find('.da').addClass('lingda')
					}else{
						mask(data.desc,'<?php echo $this->config->item('public_url');?>/winter_act/images/spring_sprize.png' ,'','3','0')
					}
				})
				.fail(function() {
					console.log("error");
				})
			}
		});

		$('.mask_bg ,.mask').remove()
		$(document).on('click', '.close', function(event) {
			$(this).parents('.mask').remove()
			$('.mask_bg').remove()
		});
	

		

		$(document).on('click', '.guize', function(event) {
			mask("<p><span></span>参与春季骑行任务，每日最高80N币，每月9号奖励翻倍~ </p><p><span></span>每个用户每台车每天可参与一次 ;</p><p><span></span>活动里程由每日首末两次上传数据的差值产生;若里程数据未及时更新，请重新连接车辆 ;</p><p><span></span>活动截止至2018年6月15凌晨，最终解释权归Ninebot俱乐部所有 </p>",'<?php echo $this->config->item('public_url');?>/winter_act/images/sprint_rule.png' ,'查看奖励','4')
		});
		
		 
		
		
		

 

		$(document).on('click', '.share_more', function(event) {
			var share_time = Date.parse(new Date()); 

			$('.fixed_share').show()
			window.location.href = "/h5/winter_act/Index/share_index?share_time="+share_time;
		});

 




	</script>


</body>
</html>